<template>
  <div class="page">
    page is search
    <!--<ul>
      <li
        v-for="(item, idx) in list"
        :key="idx">{{ item }}</li>
    </ul>-->
    <ul>
      <li
        v-for="(item, index) in $store.state.city.list"
        :key="index">{{ item }}</li>
    </ul>

    <ul>
      <li
        v-for="(item, index) in $store.state.navbar.app"
        :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    layout: 'search',
    name: 'Search',
    data () {
      return {
        list: []
      }
    },
    // 浏览器渲染时不能获取数据

    // async mounted () {
    //   let self = this
    //   let {status, data: {list}} = await axios.get('/city/list')
    //   console.log(status)
    //   if (status === 200) {
    //     self.list = list
    //   }
    // }

    // 浏览器渲染时能获取数据(asyncData主要处理组件中的数据，fetch主要处理xuex里的数据，这里使用fetch不能渲染出结果)
    async asyncData() {
      let {status, data: {list}} = await axios.get('http://localhost:3000/city/list')
      if (status === 200) {
        return {
          list
        }
      }
    }
  }
</script>

<style scoped>

</style>
